<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box{
        width: 1259px;
        height: 472px;
        position: relative;
        margin: 0 auto;
    }
    .nav ul{
        width: 720px;
        height: 47px;
        position: absolute;
        left: 50%;
        margin-left: -360px;
        bottom: 0;
        background-color: black;
    }
    .nav ul li{
        list-style: none;
        float: left;
        width: 120px;
        height: 47px;
        text-align: center;
        line-height: 47px;
    }
    a{
        text-decoration: none;
        color: white;
        font-size: 12px;
    }
    li:hover{
        background-color: white;
    }
    li:hover a{
        color: black;
    }
    .banner{
        width: 520px;
        height: 280px;
        position: relative;
        margin: 20px auto;
    }
    .tm{
        position: absolute;
        left: 0;
        top: 0;
    }
    .left{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -18px;
    }
    .right{
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -18px;
    }
    .l{
        position: absolute;
        width: 80px;
        height: 15px;
        left: 50%;
        margin-left: -40px;
        bottom: 0;
    }
    .word{
        width: 1002px;
        position: relative;
        top: 45px;
        left: 50%;
        margin-left: -500px;
    }
    .left1{
        position: fixed;
        left: 0;
        top: 50%;
        margin-top: -190px;
    }
    .right1{
        position: fixed;
        right: 0;
        top: 50%;
        margin-top: -190px;
    }
    .top{
        position: fixed;
        right: 0;
        top: 80%;
        margin-top: -40px;
        width: 80px;
        height: 80px;
        background: url(../css-材料包/img/sprite_right.png);
        background-position: -183px -90px;
        background-color: gray;
        border-radius: 15px;
    }
    .top:hover{
        background-position: -91px -275px;
    }
    .top a{
        display: block;
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <a id="top"></a>
    <div class="box">
        <a href="#">
            <img src="../css-材料包/img/sf.png">
        </a>
        <div class="nav">
            <ul>
                <li><a href="#">查询快递</a></li>
                <li><a href="#">查询快递</a></li>
                <li><a href="#">查询快递</a></li>
                <li><a href="#">查询快递</a></li>
                <li><a href="#">查询快递</a></li>
                <li><a href="#">查询快递</a></li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <img class="tm" src="../css-材料包/img/tb.jpg">
        <img class="left" src="../css-材料包/img/left.png">
        <img class="right" src="../css-材料包/img/right.png">
        <img class="l" src="../css-材料包/img/l.png">
    </div>
    <div>
        <img class="word" src="../css-材料包/img/box.png">
        <img class="left1" src="../css-材料包/img/ad-l.png">
        <img class="right1" src="../css-材料包/img/ad-r.png">
    </div>
    <div class="top"><a href="#top"></a></div>
</body>
</html>